<template>
  <div class="card content-box">
    <div class="table-box">
      <ProTable ref="proTable" :columns="columns" <#if genPage>:request-api="getTableList"</#if>>
        <#if genSave || genDeleted || genImport || genExport>
        <!-- 表格 header 按钮 -->
        <template #tableHeader<#if genDeleted>="scope"</#if>>
          <#if genSave>
          <el-button v-auth="'${moduleName}:${controller.url}:save'" type="primary" :icon="CirclePlus" @click="onSave">新增${tableComment!}</el-button>
          </#if>
          <#if genDeleted>
          <el-button
            v-auth="'${moduleName}:${controller.url}:delete'"
            type="danger"
            :icon="Delete"
            plain
            :disabled="!scope.isSelected"
            @click="batchDelete(scope.selectedListIds)"
          >
            批量删除
          </el-button>
          </#if>
          <#if genImport>
          <el-button v-auth="'${moduleName}:${controller.url}:import'" type="primary" :icon="Upload" plain @click="importExcel">导入</el-button>
          </#if>
          <#if genExport>
          <el-button v-auth="'${moduleName}:${controller.url}:export'" type="primary" :icon="Download" plain @click="exportExcel">导出</el-button>
          </#if>
        </template>
        </#if>
        <#if genUpdate || genDeleted>
        <!-- 菜单操作 -->
        <template #operation="scope">
          <#if genUpdate>
          <el-button v-auth="'${moduleName}:${controller.url}:update'" type="primary" link :icon="EditPen" @click="onUpdate(scope.row)">编辑</el-button>
          </#if>
          <#if genDeleted>
          <el-button v-auth="'${moduleName}:${controller.url}:delete'" type="danger" link :icon="Delete" @click="onDelete(scope.row)">删除</el-button>
          </#if>
        </template>
        </#if>
      </ProTable>
      <#if genSave || genUpdate>
      <${entity.className}OperateDrawer ref="drawerRef"></${entity.className}OperateDrawer>
      </#if>
      <#if genImport>
      <ImportExcel ref="importExcelRef" />
      </#if>
    </div>
  </div>
</template>

<script setup lang="ts">
<#assign icons_result = "">
<#assign api_result = "">
<#if genPage>
  <#if api_result?has_content>
    <#assign api_result = api_result + ", get" + entity.className + "Page">
  <#else>
    <#assign api_result = "get" + entity.className + "Page">
  </#if>
</#if>
<#if genSave>
  <#if icons_result?has_content>
    <#assign icons_result = icons_result + ", CirclePlus">
  <#else>
    <#assign icons_result = "CirclePlus">
  </#if>
  <#if api_result?has_content>
    <#assign api_result = api_result + ", save" + entity.className>
  <#else>
    <#assign api_result = "save" + entity.className>
  </#if>
</#if>
<#if genDeleted>
import { useHandleData } from "@/hooks/useHandleData";
  <#if icons_result?has_content>
  <#assign icons_result = icons_result + ", Delete">
  <#else>
  <#assign icons_result = "Delete">
  </#if>
  <#if api_result?has_content>
  <#assign api_result = api_result + ", delete" + entity.className>
  <#else>
  <#assign api_result = "delete" + entity.className>
  </#if>
</#if>
<#if genUpdate>
  <#if icons_result?has_content>
  <#assign icons_result = icons_result + ", EditPen">
  <#else>
  <#assign icons_result = "EditPen">
  </#if>
  <#if api_result?has_content>
  <#assign api_result = api_result + ", update" + entity.className>
  <#else>
  <#assign api_result = "update" + entity.className>
  </#if>
</#if>
<#if genDeleted || genUpdate>
  <#if api_result?has_content>
  <#assign api_result = api_result + ", " + pageResult.className>
  <#else>
  <#assign api_result = pageResult.className>
  </#if>
</#if>
<#if genImport>
import ImportExcel from "@/components/ImportExcel/index.vue";
  <#if icons_result?has_content>
  <#assign icons_result = icons_result + ", Upload">
  <#else>
  <#assign icons_result = "Upload">
  </#if>
  <#if api_result?has_content>
  <#assign api_result = api_result + ", get" + entity.className + "ImportTemplate, import" + entity.className + "Excel">
  <#else>
  <#assign api_result = "get" + entity.className + "ImportTemplate, import" + entity.className + "Excel">
  </#if>
</#if>
<#if genExport>
import { useDownload } from "@/hooks/useDownload";
  <#if icons_result?has_content>
  <#assign icons_result = icons_result + ", Download">
  <#else>
  <#assign icons_result = "Download">
  </#if>
  <#if api_result?has_content>
  <#assign api_result = api_result + ", export" + entity.className + "Excel">
  <#else>
  <#assign api_result = "export" + entity.className + "Excel">
  </#if>
</#if>
<#if icons_result?has_content>
import { ${icons_result} } from "@element-plus/icons-vue";
</#if>
<#if api_result?has_content>
import { ${api_result} } from "@/api/modules/${moduleName}/${entity.className}";
</#if>
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { ref } from "vue";
<#if genSave || genUpdate>
import ${entity.className}OperateDrawer from "@/views/${moduleName}/${entity.className?uncap_first}/${entity.className}OperateDrawer.vue";
</#if>
<#assign hasEnumDict = false>
<#assign hasDateTimeFormat = false>
<#assign hasDateFormat = false>
<#assign hasTimeFormat = false>
<#list fieldInfoList as field>
  <#if field.showInList && !field.pk && field.enumDict??>
    <#assign hasEnumDict = true>
  </#if>
  <#if field.queryType?? && field.queryType.mpType="between">
    <#if field.fieldType="LocalDateTime">
      <#assign hasDateTimeFormat = true>
    </#if>
    <#if field.fieldType="LocalDate">
      <#assign hasDateFormat = true>
    </#if>
    <#if field.fieldType="LocalTime">
      <#assign hasTimeFormat = true>
    </#if>
  </#if>
</#list>
<#if hasEnumDict>
import { getEnumDictItem } from "@/api/modules/sys/dict";
</#if>
<#if hasDateTimeFormat || hasDateFormat || hasTimeFormat>
import { <#if hasDateTimeFormat>DATE_TIME_FORMAT<#--
        --><#elseif hasDateFormat>DATE_FORMAT<#--
        --><#elseif hasTimeFormat>TIME_FORMAT</#if> } from "@/utils";
</#if>

// 表格配置项
const columns: ColumnProps[] = [
  { type: "selection", fixed: "left", width: 70 }<#list fieldInfoList as field><#if field.showInList && !field.pk>,
  {
    prop: "${field.fieldName}",
    label: "${field.comment}"<#if field.enumDict??>,
    enum: () => getEnumDictItem("${field.enumDict.name}")</#if><#if field.showInQuery>,
    search: {
      el: <#if field.enumDict??>"select"<#--
      --><#elseif field.queryType?? && field.queryType.mpType="between"><#--
        --><#if field.fieldType="LocalDateTime" || field.fieldType="LocalDate">"date-picker"<#--  datetime 与date共用的一个组件
        --><#elseif field.fieldType="LocalTime">"time-picker"</#if><#--
      --><#else>"input"</#if>,
      tooltip: "${field.comment}"<#--
      --><#if field.queryType?? && field.queryType.mpType="between">,
      props: { <#if field.fieldType="LocalDateTime">type: "datetimerange", valueFormat: DATE_TIME_FORMAT<#--
              --><#elseif field.fieldType="LocalDate">type: "daterange", valueFormat: DATE_FORMAT<#--
              --><#elseif field.fieldType="LocalTime">isRange: true, valueFormat: TIME_FORMAT</#if> }</#if>
    }</#if>
  }</#if></#list><#if genUpdate || genDeleted>,
  { prop: "operation", label: "操作", fixed: "right" }
  </#if>
];

const proTable = ref<ProTableInstance>();
<#if genPage>

const getTableList = param => {
  return get${entity.className}Page(param);
};
</#if>
<#if genSave || genUpdate>

const drawerRef = ref<InstanceType<typeof ${entity.className}OperateDrawer> | null>(null);
</#if>
<#if genSave>

const onSave = () => {
  drawerRef.value?.openDrawer({
    title: "新增",
    isSave: true,
    isUpdate: false,
    row: {},
    api: save${entity.className},
    getTableList: proTable.value?.getTableList,
    enumMap: proTable.value?.enumMap
  });
};
</#if>
<#if genSave>

const onUpdate = (row: Partial<${pageResult.className}> = {}) => {
  drawerRef.value?.openDrawer({
    title: "更新",
    isSave: false,
    isUpdate: true,
    row: { ...row },
    api: update${entity.className},
    getTableList: proTable.value?.getTableList,
    enumMap: proTable.value?.enumMap
  });
};
</#if>
<#if genDeleted>

// 删除信息
const onDelete = async (row: ${pageResult.className}) => {
  await useHandleData(delete${entity.className}, [row.id], `删除【${r"${row.id}"}】`);
  proTable.value?.getTableList();
};

// 批量删除
const batchDelete = async (ids: string[]) => {
  await useHandleData(delete${entity.className}, ids, "删除所选信息");
  proTable.value?.clearSelection();
  proTable.value?.getTableList();
};
</#if>
<#if genImport>

// 导入
const importExcelRef = ref<InstanceType<typeof ImportExcel> | null>(null);
const importExcel = () => {
  const params = {
    title: "导入${tableComment!}",
    tempApi: get${entity.className}ImportTemplate,
    importApi: import${entity.className}Excel,
    getTableList: proTable.value?.getTableList
  };
  importExcelRef.value?.acceptParams(params);
};
</#if>
<#if genExport>

// 导出
const exportExcel = async () => {
  useDownload(export${entity.className}Excel, proTable.value?.searchParam);
};
</#if>
</script>
